<template>
  <div
    class="w-full grid gap-x-[28px] gap-y-[32px] grid-cols-4 mt-[48px]"
    :class="[route.path !== '/' ? '2xl:grid-cols-3 xl:grid-cols-3 ' : '']"
  >
    <div
      v-for="(item, index) in props.list"
      :key="index"
      class="cursor-pointer"
      @click="goDetail(item.id)"
    >
      <v-card variant="text">
        <v-img
          class="align-end text-white rounded-md"
          height="170"
          :src="getFullPath(item.cover_img)"
          cover
        >
          <v-card-title
            class="bg-gradient-to-b from-transparent to-[#00000099]"
          >
            <div class="text-[14px] float-left">
              {{ item.name }}
            </div>
          </v-card-title>


          <template #placeholder>
                      <div class="d-flex align-center justify-center fill-height">
                        <v-progress-circular
                          indeterminate
                          color="black"
                        />
                      </div>
                    </template>
        </v-img>
        <v-card-text style="padding: 12px 0 0 0">
          <div class="truncate text-[16px] font-medium">{{ item.title }}</div>
        </v-card-text>
        <v-card-subtitle class="float-left px-[0px]">{{
          item.createTime
        }}</v-card-subtitle>
      </v-card>
    </div>
  </div>
</template>
<script setup>
import { useRouter,useRoute } from "vue-router";
import {useAuthStore} from "@/stores/auth";
import {useAppStore} from "@/stores/app";
const router = useRouter();
const route = useRoute();
const authStore=useAuthStore()
const appStore = useAppStore();
import {getFullPath} from '@/utils/tools'

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});

const goDetail = (id) => {
  if(authStore.token){
    router.push({
        path: '/categoryDetails',
        query: { id ,categoryId:appStore.activeMaterialCategory},
      })
  }else{
    router.push({
      path: '/login',
      query: { redirect: route.fullPath },
    })
  }

};
</script>
